<template>
	<page ref='page'>
		<!-- 我的收益 wwl-->
		<view class="page">
			<view class="top_box">
				<view class="title">
					当前账户余额(元)：¥{{user.amount}}
				</view>
				
				<!-- <view class="money"> -->
					<!-- <view class="">
						¥{{userInfo.amount}}
					</view> -->
					<!-- <view class="" v-if="juesetype == 0">
						¥{{userInfo.shangji_amount}}
					</view>
					<view class="" v-if="juesetype == 1">
						¥{{userInfo.business_amount}}
					</view>
					<view class="" v-if="juesetype == 2">
						¥{{userInfo.gzsj_amount}}
					</view>
					<view class="" v-if="juesetype == 3">
						¥{{userInfo.gzsj_amount}}
					</view>
					<view class="" v-if="juesetype == 4">
						¥{{userInfo.gongc_amount}}
					</view> -->
					<!-- <view class="zhangdmx" @click='onWithdrawlist(juesetype)'>
						账单
					</view> -->
					
					
				<!-- </view> -->
			</view>
			<view class="top_box">
				<view class="title">
					充值金额(元)
				</view>
				
				<view class="money">
					<view class="fuhao ">
						¥
					</view>
					<input type="digit" class="text_type text1 fuhao2" placeholder="输入金额" @blur="chongzhijine" @confirm="chongzhijine" />
				</view>
			</view>
			
			<view class="center_box">
				
				<button class="btn_box" :loading="loading" @click="onRecharge()">立即充值</button>
			</view>
			
			<view class="list_page" >
				<block v-if='detailed.list && detailed.list.length > 0'>
					<view class="list_box" v-for="(item,index) in detailed.list" :key='index'>
						<view class="top_box" @click="setOpenList(item.id)">
							<view class="time">
								<text>{{item.name}}</text>
								<image src="https://xiaoqu.wuguoxin.vip/uploads/web/decorationGold_bottom.png" mode="" v-if="getOpenList(item.id)"></image>
								<image src="https://xiaoqu.wuguoxin.vip/uploads/web/decorationGold_right.png" mode=""   v-else ></image>
							</view>
							<view class="detailed">
								<text>收入：{{item.amount}}</text>
								<text style="margin-left: 20rpx;" v-if="juesetype != 0">提现：{{item.low}}</text>
							</view>
						</view>
						<view class="bottom_box" v-if="getOpenList(item.id )">
							<view class="row_box" v-for='(role,ir) in item.list' :key='ir'>
								<view class="left">
									<image :src="role.users.avatar" mode="scaleToFill"></image>
								</view>
								<view class="right">
									<view class="info">
										<view class="">
											{{role.users.name}}
										</view>
										<view class="">
											{{role.type_text}}
										</view>
										<view class="">
											<text>{{role.day}}日</text> <text style="margin-left: 10rpx;">{{role.time}}</text>
										</view>
									</view>
									<view class="money">
										{{role.amount}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<empty v-else/>
			</view>
			<foot />
		</view>
		
		
		
		
	</page>
</template>

<script>
	import {getWithdrawalRule, getWxfzjsOrder, getProfitsharing, getProfitWithdrawal, getPWithdrawalquery, getAccountDetails,userRecharge} from "../static/api.js"
	import {
		getUserInfo
	} from '@/utils/getRequest.js'
	import uParse from '@/components/u-parse/u-parse.vue'
	export default{
		components:{uParse},
		data(){
			return{
				user:[],
				detailed:[],
				openList:[],
				payType:1,
				juesetype: 0,
				loading:false,
				withdrawal:null,
				price:0,
				info:{
					rule:"",
					name:"规则说明",
				}
			}
		},
		methods:{
			//充值金额变动
			chongzhijine(e){
				this.price = e.detail.value;
			},
			getOpenList(id){
				if(this.openList.length > 0){
					return this.openList.indexOf(id) != -1 
				}else{
					return false
				}
			},
			setOpenList(id){
				if(this.openList.length > 0){
					this.openList.indexOf(id) == -1  ? this.openList.push(id) :  this.openList.splice(this.openList.indexOf(id),1)
				}else{
					this.openList.push(id)
				}
			},
			onWithdrawlist(juesetype){
				console.log(juesetype, '查询账单明细a ');
				uni.navigateTo({
					url:'/pagesMy/myProfit/withdrawlist?juesetype='+juesetype
				})
			},
			//查询账单明细啊
			async getList(){
				uni.showLoading()
				console.log( '查询账单明细');
				try{
					var par = [];
					par.juesetype = this.juesetype;
					var res = await getAccountDetails(par)
					console.log(res, '查询账单明细啊');
					this.detailed = res
					if(res && res.list && res.list.length > 0) this.openList.push(res.list[0].id)
					uni.hideLoading()
				}catch{
					uni.hideLoading()
				}
			},
			onRule(){
				uni.navigateTo({
					url:'/pagesMy/decorationGold/rule'
				})
			},
			
			
			
			onAll(){
				this.withdrawal = this.userInfo.amount
			},
			change(e){
				if(userInfo.amount - e.detail.value  < 0) this.$set(this,'withdrawal',this.info.money)
			},
			//查询个人信息并更新
			async getInfoUser() {
				var result = await getUserInfo()
					
				this.$store.commit('setUser', result)
				this.user = result;
			},
			//立即充值
			async onRecharge(){
				uni.showLoading({
				  mask: true,
				  title: '请稍后...'
				})
				console.log(this.price,'请求充值');
				
				var res = await userRecharge({price:this.price})
				uni.hideLoading()
				
				console.log(res,'请求充值2');
				uni.requestPayment({
					'provider': 'wxpay',
					 ...res,
					success:  (res1) =>{
					  uni.showToast({
						title:'支付成功'
					  })
					  console.log(res1,'成功2');
					// setTimeout(()=>{
						this.price = 0;
						this.getInfoUser()
					// },300)
					},
					complete: () => {
						this.operationLoading = false
						this.operationType = null
						this.operationId = null
					},
					fail: function (err) {
						console.log(err,'失败');
					 uni.showToast({
						title:'支付失败',icon:'none'
					 })
					}
				});
			},
			//立即提现
			onSave(){
				//0上级1商家 工长2设计师3 工人4，前后端不一样的判断
				if(this.juesetype == 0 && this.userInfo.shangji_amount != 0){
					this.getProfit();
				}else if(this.juesetype == 1 && this.userInfo.business_amount != 0){
					this.getshopProfitWithdrawal();
				}else if(this.juesetype == 2 && this.userInfo.gzsj_amount != 0){
					if(this.userInfo.business_amount != 0){
						this.getshopProfitWithdrawal();
					}
					if(this.userInfo.dangzsj_amount != 0){
						this.getProfit();
					}
					
				}else if(this.juesetype == 3 && this.userInfo.gzsj_amount != 0){
					if(this.userInfo.business_amount != 0){
						this.getshopProfitWithdrawal();
					}
					if(this.userInfo.dangzsj_amount != 0){
						this.getProfit();
					}
				}else if(this.juesetype == 4 && this.userInfo.gongc_amount != 0){
					this.getProfit();
				}else{
					uni.showToast({title:'可提现金额为0',icon:'none'})
				}
				
			},
			onWithdrawlist(juesetype){
				uni.navigateTo({
					url:'/pagesMy/myProfit/withdrawlist?juesetype='+juesetype
				})
			},
			onBillDetails(){
				uni.navigateTo({
					url:'/pagesMy/myProfit/billDetails'
				})
			},
			//请求分账
			async getProfit(){
				uni.showLoading({
				  mask: true,
				  title: '请稍后...'
				})
				console.log('请求分账');
				var params = {
					juesetype:this.juesetype
				}
				var res = await getProfitsharing(params)
				uni.hideLoading()
				console.log(res);
			},
			//商户提现
			async getshopProfitWithdrawal(){
				uni.showLoading({
				  mask: true,
				  title: '请稍后...'
				})
				console.log('商户预约提现');
				var params = {
					juesetype:this.juesetype
				}
				var res = await getProfitWithdrawal(params)
				uni.hideLoading()
				if(res['code'] != ''){
					uni.showToast({title:res['message'],icon:'none'})
				}else{
					if(res['code'] == 0){
						uni.showToast({title:res['message'],icon:'none'})
					}else{
						uni.showToast({title:'提现申请失败',icon:'none'})
					}
					
				}
				console.log(res);
				// this.$global.$editUploadBack(1,'housingArchives')
				
				//需要刷新页面
				setTimeout(()=>{
					uni.hideLoading()
					this.loading = false
					uni.navigateBack()
				},3000)
				
			},
			//商户提现查询
			async getshopPWithdrawalquery(){
				console.log('商户提现查询');
				var params = {
					juesetype:this.juesetype
				}
				var res = await getPWithdrawalquery(params)
				console.log(res);
			},
			//查询提现规则
			async getRule(){
				try{
					var res = await getWithdrawalRule()
					this.info.name = res.name
					this.info.rule = res.content
				}catch{}
			}
		},
		computed:{
			userInfo() {
				return this.$store.getters.userInfo
			}
		},
		onLoad(params){
			this.onAll()
			console.log(this.userInfo);
			this.user = this.$store.getters.userInfo;
			if(params.juesetype != undefined){
				this.juesetype = params.juesetype;
				console.log(this.juesetype, '角色判断');
				
				// if(this.juesetype == 1){
				// 	this.getshopPWithdrawalquery()
				// }
			}
			
			this.getList()
			//查询提现规则
			// this.getRule()
			// console.log( '啊啊');
		},
	}
</script>
<style lang="scss" scoped>
	.zhangdmx{
		font-size: 13px;
		    color: #36353a;
		    width: 56px;
		    height: 30px;
		    line-height: 30px;
		    text-align: center;
		    border: 1px solid #707070;
		    border-radius: 16px;
	}
	
	.info_box{
		padding: 20rpx 38rpx 70rpx;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.row{
			flex: 1;
			line-height: 50rpx;
			font-weight: 700;
			>text:nth-child(1){
				font-size: 28rpx;
				color:#26252A;
			}
			.money{
				font-size: 32rpx;
				color:$theme;
			}
			
		}
	}
	.list_page{
		min-height: 60vh;
	}
	.list_box{
		box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.02);
		.top_box{
			padding: 30rpx 38rpx 20rpx;
			width: 100%;
			box-sizing: border-box;
			font-size: 24rpx;
			.time{
				line-height: 34rpx;
				margin-bottom: 16rpx;
			}
			image{
				width: 24rpx;
				height: 24rpx;
				margin-left: 16rpx;
				vertical-align: middle;
			}
			.detailed{
				color:#666;
				line-height: 34prx;
			}
		}
		.bottom_box{
			.row_box{
				padding-top: 40rpx;
				padding-left: 34rpx;
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				&:last-child{
					.right{
						border-bottom: 0;
					}
				}
				.left{
					image{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
				}
				.right{
					width: calc(100% - 94rpx);
					box-sizing: border-box;
					padding-bottom: 18rpx;
					padding-right: 38rpx;
					border-bottom: 2rpx solid #EBEBEF;
					display: flex;
					justify-content: space-between;
					.info{
						width: calc(100% - 200rpx);
						>view:nth-child(1){
							color:#26252A;
							font-size: 32rpx;
							line-height: 44rpx;
							margin-bottom: 8rpx;
						}
						>view:nth-child(2),>view:nth-child(3){
							color:#ADADAD;
							font-size: 24rpx;
							line-height: 34rpx;
						}
						>view:nth-child(2){
							margin-bottom: 24rpx;
						}
						
					}
					.money{
						color:#26252A;
						font-size: 28rpx;
						font-weight: 700;
					}
				}
			}
		}
	}
</style>
<style lang="scss" scoped>
	.page{
		min-height: 100vh;
		background-color: #fff;
		
	}
	.top_box{
		padding: 20rpx 38rpx 60rpx;
		width: 100%;
		background-color: #f2f2f2;
		box-sizing: border-box;
		.title{
			color:#26252A;
			font-size: 28rpx;
			line-height: 34rpx;
			margin-bottom: 24rpx;
		}
		.money{
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.fuhao{
				flex: 0 0 10%;
			}
			.fuhao2{
				flex: 0 0 90%;
			}
			>view:nth-child(1){
				width: calc(100% - 150rpx);
				font-size: 56rpx;
				line-height: 80rpx;
			}
			>view:nth-child(2){
				font-size: 26rpx;
				color:#36353a;
				width: 112rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border: 2rpx solid #707070;
				border-radius: 32rpx;
			}
		}
	}
	.center_box{
		padding: 0 38rpx 0;
		width: 100%;
		box-sizing: border-box;
		.title{
			font-size: 28rpx;
			color:#26252A;
			line-height: 40rpx;
			margin-bottom: 44rpx;
		}
		.operation{
			display: flex;
			justify-content:space-between;
			align-items: center;
			padding: 20rpx 0 ;
			margin-bottom: 20rpx;
			border-bottom: 2rpx solid #f6f7fb;
			.text{
				width: calc(100% - 5em);
			}
			.btn{
				width:  5em;
				text-align: right;
				font-size: 24rpx;
				color:#26252A;
			}
		}
	}
	.type{
		display: flex;
		justify-content: center;
		.row{
			display: flex;
			align-items: center;
			&:last-child{
				margin-left: 40rpx;
			}
			image{
				width: 66rpx;
				height: 66rpx;
				margin-left:10rpx;
			
			}
		}
		
	}
	.tixmx{
		font-size: 13px;
		    color: #36353a;
		    width: 100%;
		    height: 30px;
		    line-height: 30px;
		    text-align: center;
		    border: 1px solid #707070;
		    border-radius: 16px;
	}
	.tixian{
		padding: 0px 20px 0px 20px;
	}
	.zhangdmx{
		font-size: 13px;
		    color: #36353a;
		    width: 56px;
		    height: 30px;
		    line-height: 30px;
		    text-align: center;
		    border: 1px solid #707070;
		    border-radius: 16px;
	}
	.btn_box{
		width: 100%;
		width: 676rpx;
		height: 72rpx;
		line-height: 72rpx;
		font-size: 28rpx;
		color:#fff;
		background: linear-gradient(270deg,#ff7a1f, #fd9d3c);
		border-radius: 36rpx;
		margin:20rpx 0 20rpx;
	}
	button[loading]::before{
		align-self:center
	}
	button{
		display: flex;
		justify-content: center;
		align-item:center;
		padding: 0;
	}
	button::after{
		border: none;
	}
	.bottom_box{
		.name{
			margin-bottom: 10rpx;
		}
		color:#ADADAD;
		font-size: 20rpx;
		line-height: 32rpx;
		padding: 0 38rpx;
		width: 100%;
		box-sizing: border-box;
	}
</style>
